<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
        * {
            margin: 0px;
            padding: 0px;
            font-size: 0px;
        }

        body {
            /*background: gray;*/
        }

        .big {
            width: 600px;
            height: 600px;
            position: relative;
            margin: auto;
            margin-top: 10px;
        }

        .wrap {
            width: 600px;
            height: 600px;
            /*border: 2px solid gray;*/
            margin: auto;
            text-align: center;
            line-height: 100%;
            margin-top: 3px;
        }

        .ss {}

        .startgame {
            width: 600px;
            height: 600px;
            position: absolute;
            left: 2px;
            top: 52px;
            background: rgba(0, 0, 0, 0.9);
            /*display: none;*/
            /*text-align: center;
          line-height: 600px;*/
            /*border: 3px solid gray;*/
        }

        .start {
            width: 140px;
            height: 70px;
            font-size: 50px;
            color: gray;
            border: 2px solid gray;
            text-align: center;
            line-height: 70px;
            margin-top: 300px;
            margin-left: 225px;
            border-radius: 10px;
            cursor: pointer;
        }

        .top {
            width: 600px;
            height: 50px;
            margin-left: 2px;
            background: rgba(0, 0, 0, 0.9);
            border-bottom: 2px solid gray;
            /*border-top: 0px;*/
        }

        .times {
            width: 70%;
            color: gray;
            font-size: 45px;
            display: inline-block;
        }

        .score {
            width: 30%;
            color: gray;
            font-size: 45px;
            display: inline-block;
        }

        .over {
            margin-top: 3px;
            width: 602px;
            height: 600px;
            position: absolute;
            left: 2px;
            top: 52px;
            background: rgba(0, 0, 0, 0.9);
            text-align: center;
            line-height: 300px;
            font-size: 60px;
            color: gray;
            display: none;
        }

        .over .history {
            width: 100%;
            height: 60px;
            line-height: 0px;
            font-size: 60px;
            margin-top: 40px;
        }
    </style>
</head>

<body>
    <div class="big">
        <div class="top">
            <div class="times">
                时间:30
            </div>
            <div class="score">得分:0</div>
        </div>
        <div class="startgame">
            <div class="start">开始</div>
        </div>

        <div class="wrap">

        </div>
        <div class="over">
            游戏结束
            <div class="history">历史记录:0</div>
        </div>
    </div>
</body>
<script type="text/javascript">
    var start = document.querySelector('.start');
    var startgame = document.querySelector('.startgame');
    var times = document.querySelector('.times');
    var score = document.querySelector('.score');
    var over = document.querySelector('.over');
    var h = document.querySelector('.history');
    var scores = 0;
    var sconds = 30;
    var timer = null;
    // function starts(){
    //   timer=setInterval(function(){
    //     sconds--;
    //     times.innerHTML='时间:'+sconds;
    //     if (sconds==0) {
    //       clearInterval(timer);
    //     over.style.display='block';
    //     history.innerHTML='历史记录:'+his;
    //     }
    //   },1000)
    // }
    start.onclick = function() {
        startgame.style.display = 'none';
        starts();
    }
    var wrap = document.querySelector('.wrap');
    var wrapWidth = wrap.offsetWidth;
    var wrapHeight = wrap.offsetHeight;
    var x = 3;

    function rgb(max, min) {
        var rand = parseInt(Math.random() * (max - min) + min);
        return rand;
    }
    var arrs = [];

    function made() {
        var rand1 = rgb(200, 50);
        var rand2 = rgb(200, 50);
        var rand3 = rgb(200, 50);
        rand4 = rgb(0, x * x);

        // console.log(rand);
        // var arr=[];

        for (var i = 0; i < (x * x); i++) {
            var small = document.createElement('div');
            small.style.width = ((wrapWidth) / x - 2) + 'px';
            small.style.height = ((wrapWidth) / x - 2) + 'px';
            small.style.border = '1px solid black';
            small.style.display = 'inline-block';
            small.className = 'ss';
            small.style.background = 'rgb(' + rand1 + ',' + rand2 + ',' + rand3 + ')';
            // small.innerHTML=i;
            small.style.fontSize = '10px';
            small.index = i;
            arrs.push(small);
            wrap.appendChild(small);
            if (i == rand4) {
                small.style.background = 'rgb(' + rand1 + ',' + rand2 + ',' + (rand3 - 15) + ')';
            }
        }
        test(rand4);
    }
    made();


    function test(abc) {
        var ss = document.querySelectorAll('.ss');
        arrs[abc].onclick = function() {
            // console.log(x);
            for (var i = 0; i < (x * x); i++) {
                wrap.removeChild(ss[i]);
                arrs.shift();
            }

            x += 1;
            scores++;
            score.innerHTML = '得分:' + scores;
            // var his=localStorage.getItem('max')
            // if (his==null||his<scores) {
            //   localStorage.setItem('max',scores);
            //   his=scores;

            made();
        }
    }

    function starts() {
        timer = setInterval(function() {
            sconds--;
            times.innerHTML = '时间:' + sconds;
            if (sconds == 0) {
                clearInterval(timer);
                over.style.display = 'block';
                var wc = localStorage.getItem('maxscore')
                if (wc == null || wc < scores) {
                    localStorage.setItem('maxscore', scores);
                    wc = scores;
                    console.log(scores);
                    // console.log(his);
                }
                h.innerHTML = '历史记录:' + wc;
            }
        }, 1000)
    }
</script>

</html>
